<template>
	<view>
		<pageheader :setting="settingdata"></pageheader>
		<view class="metions" v-if="examine_status==0">*以下信息均为必填项，为保证的您的利益，请如实填写</view>
		<view class="metions" v-if="examine_status==1">待审核</view>
		<view class="metions" v-if="examine_status==2">审核成功</view>
		<view class="metions" v-if="examine_status==3" style="color: #F92028;">审核失败,请重新提交审核</view>

		<view class="rowone">
			<text>真实姓名</text>
			<u-input v-model="name" type="text" :border="false" placeholder="请填写真实姓名" placeholderStyle="color:#B1B8C8"
				:clearable="false" input-align="right" class="inputs" />
		</view>

		<picker @change="setsex" :value="sexindex" :range="sexarray">
			<view class="rowone">
				<text>性别</text>
				<view class="sexchoosebox">
					<!-- <text v-if="sexindex==0">完善性别信息</text> -->
					<block>{{sexarray[sexindex]}}</block>
					<u-icon name="arrow-right" color="#B1B8C8" size="24"></u-icon>
				</view>
			</view>
		</picker>
		<view class="rowone">
			<text>证件类型</text>
			<text>身份证</text>
		</view>
		<view class="rowone">
			<text>身份证号</text>
			<u-input v-model="cardnum" type="text" :border="false" placeholder="请填写正确身份证号(加密保存)"
				placeholderStyle="color:#B1B8C8" :clearable="false" input-align="right" class="inputs" />
		</view>
		<view class="noborderow">
			<text>上传身份证正反面照片</text>
			<!-- <u-icon name="arrow-right" color="#B1B8C8" size="24"></u-icon> -->
		</view>
		<view class="imgmetions">温馨提示：请上传微信账户本人的身份证照片，拍照时请确保身份证边框完整、图像清晰、光线匀称</view>
		<view class="cardimgbox">
			<view class="oncard" v-if="newcard1.length<1" @click="uploadimg1">
				<image src="../../static/img/zm.png" mode="aspectFill"></image>
				<text>上传人像页照片</text>
			</view>
			<view class="userimg" v-else>
				<image @click="$plug.showImg([newcard1],newcard1)" :src="newcard1"></image>
				<view class="iconfont icon-cangpeitubiao_shanchu" @click="newcard1=''" v-if="examine_status!=2"></view>
			</view>
			<view class="oncard" v-if="newcard2.length<1" @click="uploadimg2">
				<image src="../../static/img/fm.png" mode="aspectFill"></image>
				<text>上传背面页照片</text>
			</view>
			<view class="userimg" v-else>
				<image @click="$plug.showImg([newcard2],newcard2)" :src="newcard2"></image>
				<view class="iconfont icon-cangpeitubiao_shanchu" @click="newcard2=''" v-if="examine_status!=2"></view>
			</view>
		</view>
		<view class="note" v-if="examine_status==3">{{'审核失败备注 : '+note}}</view>

		<view class="submitbtn" v-if="examine_status==0" @click="submits">提交</view>
		<view class="submitbtnD" v-if="examine_status==1">待审核</view>
		<view class="submitbtn" v-if="examine_status==3" @click="submits">重新提交</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				settingdata: {
					name: '实名认证中心',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "oraclecenter"
				},
				name: '',
				sexarray: ["完善性别信息", "男", "女"],
				sexindex: 0,
				cardnum: "",
				card_positive_path: "",
				card_verso_path: "",
				// 身份证正面
				newcard1: "",
				// 身份证反面
				newcard2: "",
				examine_status: 0, // 审核状态 1-待审核 2-审核成功 3-审核失败

				note: '', //审核失败原因

			}
		},
		onLoad(e) {
			_this = this
			_this.getdata()
		},
		methods: {
			getdata() {
				_this.$api.get("checkattestation", {
					type: 1
				}).then(data => {
					if (data != '') {
						_this.name = data.name
						_this.cardnum = data.cardnum
						_this.newcard1 = data.card_positive_path
						_this.newcard2 = data.card_verso_path
						_this.examine_status = data.examine_status
						_this.sexindex = data.sex

						if (data.card_positive_path_info && data.card_verso_path_info) {
							_this.card_positive_path = data.card_positive_path_info
							_this.card_verso_path = data.card_verso_path_info
						}

						if (data.examine_status == 3) {
							_this.note = data.note

						}
					}
				});
			},
			// 设置性别
			setsex(e) {
				_this.sexindex = e.target.value
			},
			// 上传正面
			uploadimg1() {
				_this.$plug.uploadimg(1, _this.$api.getbase() + 'fileupload', function(data) {
					_this.newcard1 = data.web[0]
					_this.card_positive_path = data.back[0]
				})
			},
			// 上传背面
			uploadimg2() {
				_this.$plug.uploadimg(1, _this.$api.getbase() + 'fileupload', function(data) {
					_this.newcard2 = data.web[0]
					_this.card_verso_path = data.back[0]
				})
			},
			// 提交表单
			submits() {
				let data = [{
						value: _this.name,
						type: 1,
						title: "请填写真实姓名"
					},
					{
						value: _this.sexindex,
						type: 2,
						title: "请选择性别"
					},
					{
						value: _this.cardnum,
						type: 1,
						title: "请填写身份证"
					},
					{
						value: _this.cardnum,
						type: 4,
						title: "身份证格式有误"
					},
					{
						value: _this.newcard1,
						type: 1,
						title: "请上传身份证正面"
					},
					{
						value: _this.newcard2,
						type: 1,
						title: "请上传身份证背面"
					}
				]
				if (_this.$plug.verify(data)) {
					_this.$api.post("realname", {
						name: _this.name,
						sex: _this.sexindex,
						card_type: 1,
						cardnum: _this.cardnum,
						card_positive_path: _this.card_positive_path ? _this.card_positive_path : '',
						card_verso_path: _this.card_verso_path ? _this.card_verso_path : ''
					}).then(data => {
						wx.showToast({
							title: "保存成功"
						})
						setTimeout(function() {
							wx.navigateBack({
								delta: 1
							})
						}, 500);
					});
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.metions {
		width: 100%;
		height: 72rpx;
		background-color: #D7F2E8;
		text-indent: 40rpx;
		line-height: 72rpx;
		color: #38BE8C;
		font-size: 22rpx;
	}

	.note {
		color: #F92028;
		margin: 30rpx 40rpx 0;
	}

	.rowone {
		padding: 30rpx 0;
		margin: 0 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #EDEFF2;

		text {
			color: #2C3240;
			font-size: 30rpx;
		}

		.inputs {
			color: #2C3240;
			font-size: 30rpx;
			flex: 1;
		}

		.sexchoosebox {
			display: flex;
			flex-direction: row;
			align-items: center;

			text {
				color: #B1B8C8;
				font-size: 30rpx;
			}
		}
	}

	.idcardwrong {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		padding: 22rpx 0;
		margin: 0 40rpx;

		view {
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 24rpx;
			color: #fff;
			font-size: 20rpx;
			background-color: #FE2746;
		}

		text {
			margin-left: 7rpx;
			color: #FE2746;
			font-size: 26rpx;
		}
	}

	.noborderow {
		padding: 30rpx 0;
		margin: 0 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		text {
			color: #2C3240;
			font-size: 30rpx;
		}
	}

	.imgmetions {
		color: #B1B8C8;
		font-size: 24rpx;
		margin: 36rpx 40rpx 0 40rpx;
	}

	.cardimgbox {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 50rpx 40rpx 0 40rpx;
		justify-content: space-between;

		.userimg {
			width: 330rpx;
			height: 230rpx;
			position: relative;

			image {
				width: 330rpx;
				height: 230rpx;
			}

			.iconfont {
				position: absolute;
				right: 0;
				top: 0;
				z-index: 1;
				width: 48rpx;
				line-height: 48rpx;
				background-color: rgba(0, 0, 0, 0.5);
				color: #FFFFFF;
				font-size: 32rpx;
				text-align: center;
				border-radius: 0 0 0 20rpx;
			}
		}

		.oncard {
			width: 330rpx;
			height: 230rpx;
			border-radius: 2rpx;
			background-color: #F1F2F6;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 196rpx;
				height: 120rpx;
				border-radius: 5px;
			}

			text {
				margin-top: 25rpx;
				color: #2C3240;
				font-size: 24rpx;
			}
		}
	}

	.submitbtn {
		margin: 100rpx 40rpx 40rpx 40rpx;
		height: 88rpx;
		width: 649rpx;
		background: linear-gradient(86deg, #38BE8C, #05ADBB);
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		font-size: 30rpx;
	}

	.submitbtnD {
		margin: 100rpx 40rpx 40rpx 40rpx;
		height: 88rpx;
		width: 649rpx;
		background: #bbb;
		border-radius: 44rpx;
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		font-size: 30rpx;
	}
</style>
